/**
{
"style":{
"navigationBarTitleText":"验车记录",
"navigationStyle": "default"
}
}
*/

<template>
	<xi-list-tabs ref="$list" class="bg#fff" :tabs="conf.tabs" v-model="select.status" :query="on.query"
		:scrollable="true" :auto="false" lineColor="transparent" activeStyle="color:#333333;font-size:32rpx"
		inactiveStyle="color:#909397;font-size:30rpx">

		<template #default="{ data }">
			<div class="list">
				<view class="item" v-for="item in data" :key="item.id" @click="jumpDetail(item)">

					<view class="top">
						<view class="flex-lr-tbc">
							<view class="top-le">
								订单编号 <text>{{item.order_sn}}</text>
							</view>
							<!-- text1 -->
							<view :class="[item.status == 1? 'text1': '', 'top-ri']">
								{{statusBase[item.status]}}
							</view>
						</view>

						<view class="order-info display_flex mt26">
							<image class="flex-shrink" src="__ROOT__/common/images/del/1.png" mode="aspectFill"></image>

							<view class="flex_1 pl30">
								<view class="title text-ellipsis-2">
									{{item.sname}}-{{item.way == 0? '验车预约': '上门取车'}}
								</view>

								<view class="time">
									预约时间：{{item.day}}
								</view>

								<view class="time" v-if="isDF == 1">
									代付客服：{{item.customer.nickname}}
								</view>

								<view class="price">
									￥ {{getPrice(item)}} <text v-if="item.status == 5">（待补费：{{item.other_price}}）</text>
								</view>
							</view>

						</view>
					</view>

					<view class="btns display_flex justify-content_flex-end mt22">

						<view class="btn btn1 relative" @click.stop="">
							联系客服
							<button open-type="contact" class="btn-c">

							</button>
						</view>
						<view class="btn btn1" @click.stop="btn.clearOrder(item)"
							v-if="item.status == 1 || item.status == 2">
							取消订单
						</view>


						<view class="btn btn2" @click.stop="btn.payOrder(item, 0)" v-if="item.status == 1">
							立即支付
						</view>
						<!-- v-if="item.status == '待自提'" -->
						<view class="btn btn2" @click.stop="btn.code(item)" v-if="item.status == 2">
							核销码
						</view>
						
						<view class="btn btn2" @click.stop="btn.payOrder(item, 1)" v-if="item.status == 5">
							补费支付
						</view>
					</view>


				</view>
			</div>
		</template>
	</xi-list-tabs>

	<!-- 核销码 -->
	<v-code :show="isShowCode" @clear="isShowCode = false">
		<template #image>
			<image class="code-image wh414" :src="codeImage" mode="codeImage"></image>
		</template>
	</v-code>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import vCode from '@/components/vCode.vue';
	const isShowCode = ref(false)
	const codeImage = ref('')
	let conf = reactive({
		tabs: [{
				name: '全部',
				value: '',
				type: 1,
			},
			{
				name: '待支付',
				value: 1,
				type: 2,
			},
			{
				name: '已预约',
				value: 2,
				type: 3,
			},
			{
				name: '已完成',
				value: 3,
				type: 4,
			},
			{
				name: '已取消',
				value: 4,
				type: 5,
			},
			{
				name: '补费用',
				value: 5,
				type: 6,
			},
		],
		query: {},
	})

	const pageType = ref('')

	const isDF = ref('')
	
	const getPrice = (item) => {
		if(item.status == 3) {
			return Vue.jia(Number(item.pay), Number(item.other_price))
		} else {
			return Number(item.pay)
		}
	}

	const statusBase = {
		1: '待支付',
		2: '已预约',
		3: '已完成',
		4: '已取消',
		5: '补费用',
	}

	let select = Vue.reactive({
		status: '',
	})
	const $list = ref(null)
	let on = {
		async query(req) {
			if (isDF.value == 1) {
				let res = await $post("/user/yw_order", {
					...req,
					status: select.status
				})
				let obj = {
					data: res.list,
				}
				return obj

			} else {
				let res = await $post("/user/my_order", {
					...req,
					status: select.status
				})
				let obj = {
					data: res.list,
				}
				return obj
			}
		},
	}

	const btn = {
		clearOrder(item) {
			uni.showModal({
				title: '提示',
				content: '确定取消订单吗？',
				//按钮颜色
				confirmColor: '#348B8A',
				success: function(res) {
					if (res.confirm) {
						$post('/stores/out_stores_order', {
							oid: item.id
						}).then(res => {
							$list.value.reload()
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},

		async payOrder(item, type) {
			let status = await Vue.$pay(item.id, type)
			switch (status) {
				case 'success':
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					$list.value.reload()
					break;
				case 'cancel':
					uni.showToast({
						title: '取消支付',
						icon: 'none',
						duration: 2000
					});
					break;
				case 'fail':
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					break;
			}

		},

		async code(item) {
			const env_version = uni.getStorageSync('envVersion')
			const res = await $post('/user/order_qrcode', {
				oid: item.id,
				env_version
			})

			codeImage.value = res.info
			isShowCode.value = true
		}

	}

	const jumpDetail = (item) => {
		let url = '/pages/mine/mine/orderDetail?id=' + item.id
		if (isDF.value == 1) {
			url += '&isDF=1'
		}
		uni.navigateTo({
			url
		})
	}

	Vue.onShow(() => {
		nextTick(() => {
			$list.value.reload()
		})
	})
	Vue.onLoad((options) => {
		if (options.type) {
			pageType.value = select.status = options.type
		}
		if (options.isDF) {
			isDF.value = options.isDF
		}
	})
</script>
<style scoped lang='scss'>
	.list {
		.item {
			margin-top: 20rpx;
			background-color: #fff;

			.top {
				padding: 32rpx 24rpx 22rpx;
			}

			.top-le {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7D7D7D;
				line-height: 32rpx;
				text-align: justified;

				text {
					color: #333333;
				}
			}

			.top-ri {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #348B8A;

				&.text1 {
					color: #E50004;
				}
			}

			.order-info {
				image {
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.title {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #292929;
					line-height: 44rpx;
					padding-top: 6rpx;
				}

				.time {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 44rpx;
					padding-top: 8rpx;
				}

				.price {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 32rpx;
					color: #E50004;
					line-height: 48rpx;
					margin-top: 8rpx;
					text {
						font-size: 28rpx;
						
					}
				}
			}

			.btns {
				padding: 22rpx 24rpx;
				border-top: 2rpx solid #eee;

				.btn {
					width: 162rpx;
					height: 62rpx;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 28rpx;
					text-align: center;
					line-height: 62rpx;
					margin-left: 14rpx;

					&.btn1 {
						background: #F7F7F7;
						color: #828282;
					}

					&.btn2 {
						background: #348B8A;
						color: #fff;
					}
				}
			}

		}
	}
</style>